@extends('backend::layout')
@section('title',$page_title)
@push('styles')
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/dtree/font/dtreefont.css')}}" rel="stylesheet">
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/dtree/dtree.css')}}" rel="stylesheet">
@endpush
@section('content')
    @component('backend::component.tpl_frame')
        @slot('page_title') {{$page_title}} @endslot
        @slot('tools_btn')
                <a href="{{route('b_Auth_addActionForm')}}"
                   class="btn btn-primary btn-sm modal-box"
                   data-params='{"area":"80%,80%","title":"添加功能"}'
                >
                    <i class="hcl hcl-page-add"></i>&nbsp;添加功能
                </a>
        @endslot
        @slot('body_content')
            <div id="toolbarDiv" style="position: relative">
                <ul id="actionsTree" data-content="{{$treeList}}" data-id="0"> </ul>
            </div>
        @endslot
    @endcomponent
@endsection
@push('scripts')
    <script>
        layui.use(['element','layer', 'dtree'], function(){
            var layer = layui.layer,
                dtree = layui.dtree,
                $ = layui.$;
            var data = $('#actionsTree').data('content');
            if(data.length>0){
                dtree.render({
                    elem: "#actionsTree",  //绑定元素
                    toolbar:true,
                    dot:false,
                    initLevel:'1',
                    toolbarScroll:"#toolbarDiv", //划重点，必须配置，属性含义请参考文档
                    toolbarLoad: "node",  // 表示工具栏加载的节点，  可选的值还有：noleaf
                    toolbarShow:["delete"],
                    toolbarStyle: {
                        title: "功能"
                    },
                    toolbarExt:[{
                        toolbarId: "test",
                        icon:"dtree-icon-bianji",
                        title:"编辑功能",
                        handler: function(node,$div){
                            var nodeInfo = JSON.parse(node.basicData);
                           layer.open({
                               type:2,
                               title:node.context,
                               area:['80%','80%'],
                               content:nodeInfo.editUrl
                           })
                        }
                    }],
                    toolbarFun: {
                        editTreeNode: function(treeNode){

                        },
                        delTreeNode: function(treeNode){
                           var nodeInfo = JSON.parse(treeNode.basicData);
                            var load = layer.load(2);
                           $.get(nodeInfo.deleteUrl).done(function (response) {
                               if(response.status){
                                   layer.msg(response.msg,{icon:6});
                                   setTimeout(function () {
                                       window.location.href = response.url;
                                   },1000);
                               }else{
                                   layer.msg('删除失败',{icon:5});
                               }
                           }).fail(function () {
                               layer.msg('删除失败',{icon:5});
                           }).always(function () {
                               layer.close(load);
                           });
                        }
                    },
                    data:data
                });

                //单击节点 监听事件
                dtree.on("node('actionsTree')" ,function(param){

                });
            }
        });
    </script>
@endpush